<template>
  <div class="menu">
    <div @click="showPopups(id)" class="menu_item">
    <van-icon tag="span" name="other-pay" size="20" color="#333" />
    </div>
    <van-popup
      round
      v-model="show"
      @close="close"
      position="bottom"
      :style="{ maxHeight: '80%' }"
    >
      <div>
        <div class="play_box van-ellipsis">
          <div class="img">
            <img
              v-if="music.picUrl"
              :src="music.picUrl + '?param=120y120'"
              alt=""
            />
            <img v-else src="../../static/img/qqlogo.png" alt="" />
          </div>
          <div class="text van-ellipsis">
            <p class="van-ellipsis">{{ music.name }}</p>
            <p class="van-ellipsis">{{ music.ar }}</p>
          </div>
        </div>
        <van-divider />
        <div class="next_play" v-if="slice" @click="clear(id)">
          <span class="iconfont slice">&#xe7aa;</span>
          <span class="slice">从列表中清除</span>
        </div>
        <div class="next_play" @click="playNext(music)">
          <span class="iconfont">&#xe696;</span>
          <span>设为下一首播放</span>
        </div>
        <div class="next_play" @click="addLoveMuisc(music)">
          <span class="iconfont">&#xe761;</span>
          <span>添加到喜欢</span>
        </div>
        <div class="next_play" @click="toComment(id)">
          <span class="iconfont">&#xe627;</span>
          <span>评论（{{ total }}）</span>
        </div>
        <div
          class="next_play"
          v-for="(item, index) in music.arList"
          :key="index"
          @click="toMusicIndex(item.arid)"
        >
          <span class="iconfont">&#xe66c;</span>
          <span class="van-ellipsis">演唱：{{ item.arname }}</span>
        </div>
        <div
          class="next_play"
          @click="toAlbumList(music.alId)"
          v-show="music.al"
        >
          <span class="iconfont">&#xe504;</span>
          <span class="van-ellipsis">专辑：{{ music.al }}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapGetters } from "vuex";
import { GetsongdetailAPI, GetCommentAPI } from "@/api/api.js";
export default {
  name: "VueMusicMenu",
  props: {
    id: {
      type: Number / String,
    },
    slice: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      music: {},
      isShow: true,
      total: 0,
      netWork: false,
    };
  },
  mounted() {},
  computed: {
    ...mapGetters([
      "likeList",
      "sequencePlayList",
      "currentSong",
      "ListenRecentlyList",
    ]), //计算数据
  },
  methods: {
    showPopups(id) {
      this.show = true;
      GetsongdetailAPI({ ids: id }).then((res) => {
        if (res.status == 200) {
          const musics = res.data.songs.map((item) => ({
            id: item.id,
            name: item.name,
            picUrl: item.al.picUrl,
            al: item.al.name,
            alId: item.al.id,
            ar: item.ar.map((arItem) => arItem.name).join("/"),
            arList: item.ar.map((item) => ({
              arname: item.name,
              arid: item.id,
            })),
            arId: item.ar[0].id,
            fee: item.fee,
          }));
          this.music = musics[0];
          this.netWork = true;
        }
      });
      GetCommentAPI({ id, limit: 1 }).then((res) => {
        if (res.status == 200) {
          this.total = res.data.total;
        }
      });
    },
    playNext(m) {
      if (this.netWork) {
        if (m.id == this.currentSong.id) {
          Toast("当前正在播放该音乐");
          return;
        } else {
          for (let i = 0; i < this.sequencePlayList.length; i++) {
            const element = this.sequencePlayList[i];
            if (element.id == m.id) {
              //掉换位置
              this.$nextTick(function () {
                this.$store.commit("SET_PLAYNEXTMOVEARR", i);
              });
              Toast("已设为下一首播放");
              return;
            }
          }
          this.$store.commit("SET_PLAYNEXTARR", m);
          Toast("已设为下一首播放");
          return;
        }
      } else {
        Toast("数据未加载！稍后再试");
      }
    },
    addLoveMuisc(music) {
      if (this.netWork) {
        //添加喜欢音乐
        for (let i = 0; i < this.likeList.length; i++) {
          const element = this.likeList[i];
          if (element.id == music.id) {
            Toast("该歌曲已在列表中");
            this.isLove = true;
            return;
          }
        }
        this.$store.commit("SET_ADDLOVELIST", music); //添加歌曲
        Toast("已加入喜欢列表！");
        this.isLove = true;
        return;
      } else {
        Toast("数据未加载！稍后再试");
      }
    },
    toComment(id) {
      if (this.netWork) {
        this.$router.push({
          path: "/VueMusicCommentArea",
          query: {
            id,
            t: Date.now(), //刷新相同组件
          },
        });
      } else {
        Toast("数据未加载！稍后再试");
      }
    },
    toMusicIndex(id) {
      this.$router.push({
        path: "/MusicIndex",
        query: {
          id,
          t: Date.now(), //刷新相同组件
        },
      });
    },
    toAlbumList(id) {
      this.$router.push({
        path: "MusicAlbumList",
        query: {
          id,
          t: Date.now(), //刷新相同组件
          id,
        },
      });
    },
    close() {
      this.$nextTick(function () {
        this.netWork = false;
      });
    },
    clear(id) {
      for (let i = 0; i < this.ListenRecentlyList.length; i++) {
        const element = this.ListenRecentlyList[i];
        if (element.id == id) {
          this.$store.commit("SET_LISSTENRECENTLY_SLICE_ITEM", i);
          Toast("已从列表中清除！");
          this.$nextTick(function () {
            this.show = false;
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.van-popup--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 21.75rem;
}
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.125rem;
  height: 100%;
  .menu_item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 100%;
  }
  .van-popup {
    .play_box {
      display: flex;
      height: 3.125rem;
      padding: .9375rem;
      padding-bottom: 0;
      .img {
        width: 3.125rem;
        height: 3.125rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: .3125rem;
        }
      }
      .text {
        flex: 1;
        text-align: left;
        p {
          height: 1.5625rem;
          line-height: 1.5625rem;
          padding-left: .625rem;
        }
        p:nth-child(1) {
          font-size: 1.25rem;
          color: #333;
        }
        p:nth-child(2) {
          font-size: .875rem;
          color: #666;
        }
      }
    }

    .next_play {
      margin: 0 .9375rem;
      height: 2.5rem;
      display: flex;
      border-radius: .3125rem;
      margin-bottom: .625rem;
      background-color: #fafafa;
      .slice {
        color: #dd001b;
      }
      .iconfont {
        font-size: 1.4375rem;
      }

      span:nth-child(1) {
        height: 100%;
        width: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
      }
      span:nth-child(2) {
        flex: 1;
        text-align: left;
        line-height: 2.5rem;
        font-size: .9375rem;
      }
    }
  }
}
</style>